<template>
  <NuxtLayout name="user" menuActive="7">
    <div class="box">
      <ul>
        <li class="box_li" v-for="item in tableData" :key="item.id">
          <div class="box_li_title">
            <p class="box_li_title_text">{{ item.course ? `【${item.course.title}】` : '' }}{{ item.courseVideo ? item.courseVideo.title : '' }}</p>
            <el-button type="primary" size="small" @click="replyFn(item)">回复</el-button>
          </div>
          <div class="box_li_auth">{{ item.commentName }} · {{ item.commentTime }}</div>
          <div class="box_li_content">{{ item.commentContent }}</div>
          <div class="box_li_replys">
            <el-timeline>
              <el-timeline-item v-for="ite, ind in item.replys" :key="ind" :timestamp="ite.replyTime" placement="top">
                <el-card>
                  <p>回复人名称：{{ ite.replyName }}</p>
                  <p>回复内容：{{ ite.replyContent }}</p>
                  <p>回复端：{{ ite.type < 1 ? '机构回复' : '用户回复' }}</p>
                </el-card>
              </el-timeline-item>
            </el-timeline>
          </div>
        </li>
      </ul>
      <el-empty v-show="tableData.length < 1" />
      <div class="pagin" v-show="tableData.length > 0">
        <el-pagination background layout="prev, pager, next, total" :total="total" :page-size="listForm.pageSize"
          @change="pageChangeFn" />
      </div>
    </div>
    <MyForm :visible="formVisible" :forms="forms" @pick="formPickFn" />
  </NuxtLayout>
</template>

<script setup>
import { courseCommentPageList, replyCommentApi } from '~/server/api'
import MyForm from './form'
// TDK
const prevHost = useRequestHeaders()["x-forwarded-proto"];
const host = useRequestHeaders()["host"];
const fullPath = useRoute()["fullPath"];
useSeoMeta({
  title: "技考邦_我的留言",
  keywords: "技考邦,我的留言",
  description: "技考邦，我的留言。",
  ogTitle: "技考邦_我的留言",
  ogDescription: "技考邦，我的留言。",
  ogType: "article",
  ogUrl: `${prevHost}://${host}${fullPath}`,
})
// 列表
const listForm = ref({
  pageNum: 1,
  pageSize: 10
})
const tableData = ref([])
const total = ref(0)
const getList = async () => {
  let { data: listRes } = await useAsyncData('courseCommentPageList', () => useServerRequest(courseCommentPageList, {
    method: 'post',
    body: JSON.stringify(listForm.value)
  }))
  if (listRes.value && listRes.value.errno === 0) {
    tableData.value = listRes.value.result.list;
    total.value = listRes.value.result.total;
  }
}
getList()
// 分页
const pageChangeFn = (val) => {
  useRouter().push(`/userCenter/LeaveMessage?p=${val}`)
}
// 回复
const formVisible = ref(false)
const forms = ref({})
const replyFn = (val) => {
  forms.value.id = val.id;
  forms.value.replyContent = '';
  formVisible.value = true;
}
// 取消 确认
const formPickFn = async (e) => {
  formVisible.value = e.visible;
  if (e.form) {
    let classRes = await useServerRequest(replyCommentApi, {
      method: 'post',
      body: JSON.stringify(e.form)
    })
    if (classRes.errno === 0) {
      ElMessage({
        message: '回复成功',
        type: 'success'
      })
      getList()
      return false;
    }
  }
}
// 监听
watchEffect(() => {
  // 分页
  if (useRoute().query.p) {
    listForm.value.pageNum = useRoute().query.p;
    getList()
  }
})
</script>

<style lang="less">
.box_li_replys {
  padding-top: 20px;

  .el-card__body {
    padding: 0 15px;
  }

  .el-card.is-always-shadow {
    box-shadow: none;
    border: 0;
    background-color: #f8f8f8;
  }
}
</style>
<style lang="less" scoped>
.box {
  padding: 36px 30px;

  &_li {
    margin-bottom: 20px;

    &_title {
      padding: 12px 0;
      display: flex;
      align-items: flex-start;

      &_text {
        flex: 1 0;
        overflow: hidden;
        font-size: 16px;
        line-height: 24px;
        color: #333333;
        margin: 0;
      }
    }

    &_auth {
      font-size: 14px;
      color: #999;
      padding: 0 15px;
    }

    &_content {
      margin-top: 10px;
      font-size: 15px;
      background-color: #f8f8f8;
      padding: 10px 15px;
      border-radius: 4px;
    }
  }

  .pagin {
    margin-top: 30px;
    display: flex;
    justify-content: center;
  }
}
</style>